﻿<phone:PhoneApplicationPage
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
	xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800" 
	x:Class="Iridescent.MainPage"
	d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
	FontFamily="{StaticResource PhoneFontFamilyNormal}"
	FontSize="{StaticResource PhoneFontSizeNormal}"
	Foreground="{StaticResource PhoneForegroundBrush}"
	SupportedOrientations="Portrait" Orientation="Portrait"
	shell:SystemTray.IsVisible="False">

	<!--LayoutRoot is the root grid where all page content is placed-->
	<Grid x:Name="LayoutRoot" Background="Transparent">

		<!--Panorama control-->
		<controls:Panorama Title="my application">
			<controls:Panorama.Background>
				<ImageBrush ImageSource="PanoramaBackground.png"/>
			</controls:Panorama.Background>

			<!--Panorama item one-->
			<controls:PanoramaItem Header="first item">
				<!--Double line list with text wrapping-->
				<ListBox ItemsSource="{Binding Items}" Margin="0,0,-12,0">
					<ListBox.ItemTemplate>
						<DataTemplate>
							<StackPanel Margin="0,0,0,17" Width="432" Height="78">
								<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" />
								<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" />
							</StackPanel>
						</DataTemplate>
					</ListBox.ItemTemplate>
				</ListBox>
			</controls:PanoramaItem>

			<!--Panorama item two-->
			<controls:PanoramaItem Header="second item">
				<!--Double line list with image placeholder and text wrapping-->
				<ListBox ItemsSource="{Binding Items}" Margin="0,0,-12,0">
					<ListBox.ItemTemplate>
						<DataTemplate>
							<StackPanel Orientation="Horizontal" Margin="0,0,0,17" Height="105" Width="432">
								<!--Replace rectangle with image-->
								<Rectangle Height="100" Width="100" Fill="#FFE5001b" Margin="12,0,9,0"/>
								<StackPanel Width="311">
									<TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" />
									<TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="12,-6,12,0" Style="{StaticResource PhoneTextSubtleStyle}" />
								</StackPanel>
							</StackPanel>
						</DataTemplate>
					</ListBox.ItemTemplate>
				</ListBox>
			</controls:PanoramaItem>
		</controls:Panorama>
	</Grid>
</phone:PhoneApplicationPage>
